<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .input-group{
            margin-bottom: 10px;
        }
        .user,.pwd{
            width: 250px;
            height: 30px;
            border: 1px solid #333;
            outline: none;
            border-radius: 4px;
        }

    </style>
</head>
<body>
    <!-- action="" 表单提交的地址 将收集到数据提交到action所指的url,如果不设置默认提交到当前页 => 会导致页面刷新 -->
    <!-- method="get"  get方式提交和post方式提交   -->
    <form action="" method="get">
        <div class="input-group">
            <label>用户名:</label>
            <input type="text" class="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <label>密&emsp;码:</label>
            <input type="text" class="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <label>出生年月:</label>
            <select class="year" id="">
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
                <option value="2009">2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
            </select>
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </div>
    </form>
</body>
<script>
    // onfocus  表单控件聚焦时触发
    // onblur   表单控件失焦时触发
    // onchange 表单控件内容改变时触发
    //    a. onchange 用在 input textare中  1. 内容发生改变 2. 表单失焦时触发/按回车键亦可触发(按回车键有可能触发表单的提交事件)
    //    b. 下拉框选项切换时触发 (如果option中有value属性,优先取被选中的option的value值, 如果没有value属性 -> 则取被选中的option中标签内的值)

    // oninput  即时输入(表单控件内容改变时触发)

    // onsubmit  表单提交时触发  (绑定给表单 由提交按钮(input:submit button)触发)
    // onreset   表单重置时触发  (绑定给表单 由重置按钮触发)

    var form = document.getElementsByTagName("form")[0];
    var userInp = document.getElementsByClassName("user")[0];
    var yearSel = document.getElementsByClassName("year")[0];

    // 聚焦 点击输入框,输入框出现光标变为可编辑的状态
    // 失焦 点击输入以外的位置, 输入框光标消失
    userInp.onfocus = function(){
        console.log("userInp聚焦");
        this.style.borderColor = "orange";
    }
    
    // userInp.onblur = function(){
    //     console.log("userInp失焦");
    //     this.style.borderColor = "#333";

    //     var user = userInp.value; // 取值

    //     if(user.length >=6 && user.length <= 12){
    //         // alert("用户名长度正确")
    //         this.nextElementSibling.textContent = "√";
    //     }else{
    //         // alert("用户名需要在6-12位之间")
    //         this.nextElementSibling.textContent = "用户名需要在6-12位之间";
    //     }

    // }

    // onchange 内容发生改变时触发
    // userInp.onchange = function(){
    //     console.log("userInp:change触发了");
    //     this.style.borderColor = "#333";

    //     var user = userInp.value; // 取值

    //     if(user.length >=6 && user.length <= 12){
    //         // alert("用户名长度正确")
    //         this.nextElementSibling.textContent = "√";
    //     }else{
    //         // alert("用户名需要在6-12位之间")
    //         this.nextElementSibling.textContent = "用户名需要在6-12位之间";
    //     }
    // }

    // oninput 内容发生改变时触发
    // userInp.oninput = function(){
    //     console.log("userInp:oninput触发了");
    //     this.style.borderColor = "#333";

    //     var user = userInp.value; // 取值

    //     if(user.length >=6 && user.length <= 12){
    //         // alert("用户名长度正确")
    //         this.nextElementSibling.textContent = "√";
    //     }else{
    //         // alert("用户名需要在6-12位之间")
    //         this.nextElementSibling.textContent = "用户名需要在6-12位之间";
    //     }
    // }



    // yearSel.onchange = function(){
    //     console.log(this.value); // this-> yearSel
    // }



    // onsubmit 提交事件 => 表单提交时触发
    form.onsubmit = function(){
        console.log("表单提交");
        return false;  // 固定写法 阻止浏览器的默认行为(阻止表单提交)
    }

    form.onreset = function(){
        console.log("表单重置");
    }

</script>
</html>